{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Appointments</h2>
        <a href="{% url 'appointments:appointment-create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> New Appointment
        </a>
    </div>

    <!-- Filter Form -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="scheduled" {% if request.GET.status == 'scheduled' %}selected{% endif %}>Scheduled</option>
                        <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                        <option value="no_show" {% if request.GET.status == 'no_show' %}selected{% endif %}>No Show</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="service" class="form-label">Service</label>
                    <select name="service" id="service" class="form-select">
                        <option value="">All Services</option>
                        {% for service in services %}
                            <option value="{{ service.id }}" {% if request.GET.service == service.id|stringformat:'s' %}selected{% endif %}>
                                {{ service.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                {% if user.is_staff %}
                <div class="col-md-4">
                    <label for="staff" class="form-label">Staff Member</label>
                    <select name="staff" id="staff" class="form-select">
                        <option value="">All Staff</option>
                        {% for staff in staff_members %}
                            <option value="{{ staff.id }}" {% if request.GET.staff == staff.id|stringformat:'s' %}selected{% endif %}>
                                {{ staff.user.get_full_name|default:staff.user.username }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{% url 'appointments:appointment-list' %}" class="btn btn-secondary">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Appointments Table -->
    <div class="card">
        <div class="card-body">
            {% if appointments %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Date & Time</th>
                                <th>Client</th>
                                <th>Service</th>
                                <th>Staff</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for appointment in appointments %}
                            <tr>
                                <td>
                                    {{ appointment.start_time|date:"M d, Y" }}<br>
                                    <small class="text-muted">{{ appointment.start_time|time:"H:i" }} - {{ appointment.end_time|time:"H:i" }}</small>
                                </td>
                                <td>{{ appointment.client.get_full_name|default:appointment.client.username }}</td>
                                <td>{{ appointment.service.name }}</td>
                                <td>{{ appointment.staff_member.user.get_full_name|default:appointment.staff_member.user.username }}</td>
                                <td>
                                    <span class="badge bg-{{ appointment.get_status_display|lower }}">
                                        {{ appointment.get_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{% url 'appointments:appointment-detail' appointment.id %}" class="btn btn-sm btn-info" title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    {% if user == appointment.client or user.is_staff %}
                                        <a href="{% url 'appointments:appointment-update' appointment.id %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    {% endif %}
                                    {% if user.is_staff %}
                                        <a href="{% url 'appointments:appointment-delete' appointment.id %}" class="btn btn-sm btn-danger" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="First">
                                        <span aria-hidden="true">&laquo;&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Last">
                                        <span aria-hidden="true">&raquo;&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="alert alert-info">
                    No appointments found. <a href="{% url 'appointments:appointment-create' %}">Create a new appointment</a>.
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-submit filter form when dropdowns change
    document.addEventListener('DOMContentLoaded', function() {
        const filterSelects = document.querySelectorAll('#status, #service, #staff');
        filterSelects.forEach(select => {
            select.addEventListener('change', function() {
                this.form.submit();
            });
        });
    });
</script>
{% endblock %}